<template>
  <div class="avatar-wrap">
    <van-nav-bar
      title="头像修改"
      left-text="返回"
      left-arrow
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="20"/>
      </template>

    </van-nav-bar>
    <div class="user-info-wrap">
      <label for="file" class="index-drag-message-label">
        <van-image
          class="class-avatar"
          round
          width="5rem"
          height="5rem"
          lazy-load
          :src="avatar"
        />
        <input type="file" accept="image/*" id="file" name="file" style="display: none" @change="beforUpload"/>
      </label>
      <span class="upload-desc">点击更换头像</span>
      <van-divider/>

      <van-field  v-model="id" label="唯一id" input-align="right"
                 data-clipboard-target='#user-id'>
        <template #button>
          <span class="iconfont icon-copy" @click="copyUserId" id='copy'></span>
        </template>
      </van-field>
      <van-field input-align="right" v-model="form.name" placeholder="请填写昵称" label="昵称"/>

      <van-field
        readonly
        input-align="right"
        clickable
        name="picker"
        :value="form.sex.name"
        label="性别"
        placeholder="请选择性别"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>

      <van-field input-align="right" v-model="form.sign"
                 placeholder="请填写个性签名"
                 rows="2"
                 type="textarea"
                 maxlength="50"
                 label="个性签名"
                 show-word-limit
                 autosizelabel="个性签名"/>

    </div>
    <div class="submit-button">
      <van-button class="submit-button" type="primary" block round size="small"
                  color="linear-gradient(to right, #ff6034, #ee0a24)">
        提交
      </van-button>
    </div>

  </div>
</template>

<script>

export default {
  name: 'user-info',
  data () {
    return {
      avatar: ' ',
      form: {
        name: '',
        sign: '',
        sex: {}
      },
      columns: ['男', '女'],
      id: '111111',
      showPicker: false
    }
  },

  methods: {
    onConfirm (value, index) {
      this.$set(this.form, 'sex', {name: value, key: index})
      this.showPicker = false
    },
    copyUserId () {
      this.$copyText(this.id).then(function (e) {
        alert('Copied')
        console.log(e)
      }, function (e) {
        alert('Can not copy')
        console.log(e)
      })
    },
    beforUpload (ev) {
      let that = this
      let oFile = ev.target.files[0]
      let fileReader = new FileReader()
      fileReader.readAsDataURL(oFile)
      fileReader.onload = function () {
        that.avatar = fileReader.result
      }
    },
    back () {
      this.$router.back()
    }
  }
}
</script>

<style scoped>
@import '../../assets/icon/iconfont.css';

.avatar-wrap {
  height: 100%;
}
.submit-button{
  padding: 0 10px;
  margin-top: 20px;
}

.user-info-wrap {
  padding-top: 2rem;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.upload-desc {
  margin-top: 5px;
  font-size: 12px;
  color: #E65D6E;
}

.class-avatar {
  background: white;
}

.upload-button {
  position: fixed;
  bottom: 5px;
  left: 0;
  right: 0;
}
</style>
